@charset "utf-8";

.wrap{
    width: 100%;
    max-width: 10rem;
    margin: 0 auto;
    position: relative;
    background-color: #f8f6f6;
    .header{
        width: 100%;
        margin-bottom: .266667rem;
        .swiper-slide{
            width: 100%;
            height: 4.266667rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .header-box{
            width: 100%;
            box-sizing: border-box;
            padding: 0 .266667rem;
            .clfi-box{
                width: 100%;
                background-color: #fff;
                box-sizing: border-box;
                padding: .533333rem 0;
                overflow: hidden;
                margin-top: -0.4rem;
                position: relative;
                z-index: 1000;
                border-top-right-radius: .106667rem;
                border-top-left-radius: .106667rem;
                .clfi-list{
                    width: 100%/3;
                    float: left;
                    a{
                        display: inline-block;
                        text-decoration: none;
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        img{
                            width: 2rem;
                            height: 2rem;
                            margin-bottom: .133333rem;
                        }
                        p{
                            font-size: .373333rem;
                            color: #333;
                        }
                    }
                }
            }
            .notice-box{
                width: 100%;
                background-color: #fff;
                box-sizing: border-box;
                border-top: 1px solid #efefef;
                padding: 0 .266667rem;
                border-bottom-right-radius: .106667rem;
                border-bottom-left-radius: .106667rem;
                .img-box{
                    display: inline-block;
                    box-sizing: border-box;
                    padding: .266667rem .266667rem .266667rem 0;
                    vertical-align: middle;
                    border-right: 1px solid #efefef;
                    img{
                        width: .546667rem;
                        height: .546667rem; 
                    }
                }
                
                .notice-right{
                    float: right;
                    vertical-align: middle;
                    font-size: .32rem;
                    color: #666;
                    width: 8rem;
                    padding: .266667rem  0;
                }
            }
        }
    }
    .content{
        width: 100%;
        box-sizing: border-box;
        padding: 0 .266667rem;
        margin-bottom: 1.333333rem;
        .promotion-box{
            width: 100%;
            box-sizing: border-box;
            // padding: .266667rem;
            background-color: #fff;
            margin-bottom: .266667rem;
            a{
                display: inline-block;
                width: 100%;
                height: 100%;
                text-decoration: none;
                // overflow: hidden;
                .top-left{
                    width: 4.733333rem;
                    height: 3.133333rem;
                    box-sizing: border-box;
                    border-right: 1px solid #efefef;
                    border-bottom: 1px solid #efefef;
                    padding: .266667rem .266667rem 0 .266667rem;
                    display: inline-block;
                    img{
                        width: 1.24rem;
                        height: .346667rem;
                        // margin-bottom: .133333rem;
                    }
                    .topleft-bottom{
                        width: 100%;
                        .tlb-list{
                            width: 1.25rem;
                            text-align: center;
                            display: inline-block;
                            margin-right: .08rem;
                            &:last-child{
                                margin-right: 0;
                            }
                            img{
                                width: 1.2rem;
                                height: 1.2rem;
                            }
                            p{
                                color: #333;
                                font-size: .293333rem;
                            }
                            .yuan{
                                color: #999;
                                font-size: .266667rem;
                                text-decoration: line-through;
                            }
                            
                        }
                    }
                }
                .topbottom-right{
                    width: 4.733333rem;
                    height: 3.133333rem;
                    border-bottom: 1px solid #efefef;
                    float: right;
                    box-sizing: border-box;
                    padding: .266667rem 0 0 .266667rem;
                    &:last-child{
                        border-bottom: 0;
                    }
                    h2{
                        font-size: .346667rem;
                        color: #333;
                    }
                    h3{
                        font-size: .266667rem;
                        color: #999;
                    }
                    .right-bottom{
                        width: 100%;
                        margin-top: .266667rem;
                        img{
                            width: 1.866667rem;
                            height: 1.333333rem;
                            margin-right: .266667rem;
                        }
                    }
                }
                .bottom-left{
                    width: 4.733333rem;
                    box-sizing: border-box;
                    // border-right: 1px solid #efefef;
                    display: inline-block;
                    overflow: hidden;
                    .bl-list{
                        width: 2.36rem;
                        float: left;
                        box-sizing: border-box;
                        border-right: 1px solid #efefef;
                        padding: .266667rem 0 0 .266667rem;
                        height: 3.133333rem;
                        h2{
                            font-size: .346667rem;
                            color: #333;
                        }
                        h3{
                            font-size: .266667rem;
                            color: #999;
                        }
                        img{
                            margin-top: .266667rem;
                            width: 1.866667rem;
                            height: 1.333333rem;
                        }
                    }
                }
            }
        }
        .recommend-box{
            width: 100%;
            box-sizing: border-box;
            .recommend-header{
                width: 100%;
                text-align:center;
                margin-bottom: .266667rem;
                box-sizing: border-box;
                img{
                    width: 2.826667rem;
                    height: .733333rem;
                }
            }
            .recommend-lists{
                width: 100%;
                box-sizing: border-box;
                .recommend-list{
                    display: inline-block;
                    width: 4.666667rem;
                    // border-radius: .106667rem;
                    margin-right: .013333rem;
                    margin-bottom: .266667rem;
                   a{
                       display: inline-block;
                       width: 100%;
                       height: 100%;
                       text-decoration: none;
                    img{
                        width: 4.666667rem;
                        height: 3.733333rem;
                        border-top-left-radius: .106667rem;
                        border-top-right-radius: .106667rem;
                    }
                    .relist-bottom{
                        width: 100%;
                        box-sizing: border-box;
                        padding: .266667rem;
                        background-color: #fff;
                        overflow: hidden;
                        border-bottom-left-radius: .106667rem;
                        border-bottom-right-radius: .106667rem;
                        h3{
                            width: 100%;
                            font-size: .373333rem;
                            color: #333;
                            margin-bottom: .266667rem;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        .price{
                            font-size: .373333rem;
                            color: #ff3737;
                        }
                        .buy{
                            width: 1.6rem;
                            height: .6rem;
                            line-height: .6rem;
                            color: #fff;
                            background-color: #ff3737;
                            border-radius: .106667rem;
                            float: right;
                            text-align: center;
                            font-size: .346667rem;
                        }
                    }
                   }
                    &:nth-of-type(2n){
                        margin-right: 0;
                    }
                }
            }
            .tishi{
                width: 100%;
                box-sizing: border-box;
                text-align: center;
                font-size: .266667rem;
                color: #999;
                padding-bottom: .4rem;
            }
        }
    }
   

}